import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import './app-visual-auto-complete.less';

/**
 * @description 虚拟表单自动填充
 * @export
 * @class AppVisualAutoComplete
 * @extends {Vue}
 */
@Component({})
export class AppVisualAutoComplete extends Vue {

  /**
   * @description 编辑器实列
   * @type {*}
   * @memberof AppVisualAutoComplete
   */
  @Prop() editorInstance!: any;

  /**
   * @description 表单项
   * @type {*}
   * @memberof AppVisualAutoComplete
   */
  @Prop() public parentItem!: any;

  /**
   * @description 编辑器值
   * @type {string}
   * @memberof AppVisualAutoComplete
   */
  @Prop() public value!: string;

  /**
   * @description 编辑器名称
   * @type {string}
   * @memberof AppVisualAutoComplete
   */
  @Prop() public name!: string;

  /**
   * @description 编辑器位置
   * @type {*}
   * @memberof AppVisualAutoComplete
   */
  @Prop() public position!: any;

  /**
   * @description 代码表服务
   * @type {*}
   * @memberof AppVisualAutoComplete
   */
  @Prop() public codeListService!: any;

  /**
   * @description 上下文
   * @type {string}
   * @memberof AppVisualAutoComplete
   */
  @Prop() context!: any;

  /**
   * @description 视图参数
   * @type {string}
   * @memberof AppVisualAutoComplete
   */
  @Prop() viewparam!: any;

  /**
   * @description 真实控件
   * @type {string}
   * @memberof AppVisualAutoComplete
   */
  @Prop() realCompRef!: any;

  /**
   * @description 列表
   * @type {any[]}
   * @memberof AppVisualAutoComplete
   */
  public items: any[] = [];

  /**
   * @description 输入框文本值
   * @type {string}
   * @memberof AppVisualAutoComplete
   */
  public text: string = '';

  /**
   * @description 下拉列表数据改变
   * @param {*} newVal 新值
   * @param {*} oldVal 旧值
   * @memberof AppVisualAutoComplete
   */
  @Watch("realCompRef.items", {
    deep: true,
    immediate: true,
  })
  public listItemsChange(newVal: any[], oldVal: any[]) {
    if (newVal?.length > 0) {
      this.items = [...newVal];
    }
  }

  /**
   * @description 创建
   * @memberof AppVisualAutoComplete
   */
  public created() {
    this.items = [];
  }

  /**
   * @description 值改变
   * @param {*} value 值
   * @memberof AppVisualAutoComplete
   */
  public onSelect(value: any) {
    this.$emit('change', { name: this.name, value: value });
  }

  /**
   * @description 清除
   * @memberof AppVisualAutoComplete
   */
  public onClear() {
    this.$emit('change', { name: this.name, value: '' });
  }

  /**
   * @description 输入值
   * @memberof AppVisualAutoComplete
   */
  public onChange(value: any) {
    this.text = value;
    if (this.realCompRef && this.realCompRef.onSearch instanceof Function) {
      this.realCompRef.onSearch(value);
    }
  }

  /**
   * @description 绘制项
   * @memberof AppVisualAutoComplete
   */
  public renderOption(item: any) {
    return (
      <li
        onClick={() => {
          this.onSelect(item[this.realCompRef.deMajorField]);
        }}
        class="option luckysheet-mousedown-cancel"
      >
        {item[this.realCompRef.deMajorField]}
      </li>
    );
  }

  /**
   * @description 绘制列表
   * @memberof AppVisualAutoComplete
   */
  public renderList() {
    return (
      <ul class="options luckysheet-mousedown-cancel">
        {this.items.map((item: any) => {
          return this.renderOption(item);
        })}
      </ul>
    )
  }

  /**
   * @description 绘制组件
   * @return {*}
   * @memberof AppVisualAutoComplete
   */
  public render() {
    return (
      <div class="app-visual-auto-complete luckysheet-mousedown-cancel">
        <div class="auto-complete-container">
          <input
            type="text"
            value={this.text || this.value}
            class="auto-complete__inner luckysheet-mousedown-cancel"
            disabled={this.realCompRef.disabled}
            readonly={this.realCompRef.readonly}
            style={{
              height: `${this.position.height}px`,
              width: `${this.position.width}px`
            }}
            onFocus={() => {
              this.onChange('');
            }}
            onInput={(event: any) => {
              this.onChange(event.target.value);
            }}/>
            {
              this.text && 
              <img
                class="app-visual-upload-icon clear luckysheet-mousedown-cancel"
                onClick={() => this.onClear()}
                src="../assets/dist/assets/iconfont/close.svg" />
            }
            {this.renderList()}
        </div>
      </div>
    )
  }
}
